<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>冲印设置</title>
    <link href="../css.min/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" href="../css/header.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <style>
    	.print-btn{
    		background-color:#EE4B62;
    		color: white !important;
    	}
    	.select-card{
    		margin-top: 10px;
    		margin-bottom: 10px;
    	}
    	.mui-table-view .mui-table-view-divider{
    		color:#FFFFFF;
    		font-weight: bold;
    		background-color: #56abe4;
    	}
    	.dlist {
			padding: 0px;
			margin: 1em;
			background: #fff;
			border: 1px solid #ddd;
			-webkit-border-radius: 3px;
			border-radius: 3px;
		}
		.ditem {
			overflow: hidden;
			list-style-type: none;
			font-size: 1em;
			padding: 1em;
			border-bottom: inset 1px #ebebeb;
			vertical-align: middle;
		}
		.ditem:active {
			background: #f4f4f4;
		}
		.ditem:last-child {
			border-bottom: inset 0px #ebebeb;
		}
		.ditem-empty {
			overflow: hidden;
			list-style-type: none;
			font-size: 1em;
			padding: 1em;
			vertical-align: middle;
		}
		.get-photo{
			margin-right: 30px;
			color: #FFFFFF;
			font-size: 30px;
		}
		.photo-name{
			color: black;
		}
		.imgpreview-close{
			font-size: 30px;
		}
		.mui-scroll-wrapper{
			bottom: 50px;
		}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
	    <h1 class="mui-title">冲印设置</h1>
	</header>
	<div class="mui-content mui-scroll-wrapper">
		<div class="mui-scroll">
			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
				<li class="mui-table-view-divider" style="height: 40px;line-height: 40px;">				
					<a id="camera" class="get-photo mui-icon iconfont icon-icon38  mui-pull-right"></a>
					<a id="gallery" class="get-photo mui-icon iconfont icon-see-photo mui-pull-right"></a>
				</li>
				
				<div class="mui-card select-card">
					<ul id="history" class="mui-table-view">
						<li id="empty" class="ditem-empty">请选择要冲印的照片</li>
						<!--<li class="mui-table-view-cell mui-media mui-disabled">
							<div class="mui-table">
								<div class="mui-table-cell mui-col-xs-8">
									<img class="mui-media-object mui-pull-left" src="../img/background.jpg">
									<div class="mui-media-body mui-h5 photo-name mui-ellipsis-2">
										幸福
									</div>
								</div>
								<div class="mui-table-cell mui-col-xs-4 mui-text-right">
									<a class="imgpreview-close mui-icon mui-icon-closeempty"></a>
								</div>
							</div>
						</li>-->
					</ul>
				</div>
				
				<li class="mui-table-view-divider">尺寸</li>
				<div class="mui-card select-card">
					<ul id="selected-size" class="mui-table-view mui-table-view-radio">
						<li class="mui-table-view-cell">
							<a size="three_inch" class="mui-navigate-right">
								3寸（8.9cm×6.35cm）
							</a>
						</li>
						<li class="mui-table-view-cell mui-selected">
							<a size="forth_inch" class="mui-navigate-right">
								4寸（10.2cm×7.6cm）
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a size="five_inch" class="mui-navigate-right">
								5寸（12.7cm×8.9cm）
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a size="six_inch" class="mui-navigate-right">
								6寸（15.2cm×10.2cm）
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a size="seven_inch" class="mui-navigate-right">
								7寸（17.8cm×12.7cm）
							</a>
						</li>
					</ul>
				</div>
				
				<li class="mui-table-view-divider">相纸</li>
				<div class="mui-card select-card">
					<ul id="selected-papertype" class="mui-table-view mui-table-view-radio">
						<li class="mui-table-view-cell mui-selected">
							<a class="mui-navigate-right">
								柯达Kodak
							</a>
						</li>
						<!--<li class="mui-table-view-cell">
							<a class="mui-navigate-right">
								佳能Canon
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">
								爱普生EPSON
							</a>
						</li>-->
					</ul>
				</div>
				<li class="mui-table-view-divider" style="background-color: #FFFFFF;"></li>
			</ul>
		</div>
	</div>
	<nav id="nav" class="mui-bar mui-bar-tab">
		<a id="confirmPrint" class="mui-tab-item print-btn">生成订单</a>
	</nav>
</body>
<script src="../js.min/mui.min.js"></script>
<script type="text/javascript" src="../js/config.js" ></script>
<script type="text/javascript" src="../js/utils.js" ></script>
<script type="text/javascript" charset="utf-8">
    mui.init();
    
    var M=this;
    M.PhotoFiles=[];//已选照片
    M.selePhotoName=[];//已选照片名称
    M.SIZE_DES="4寸（10.2cm×7.6cm）";//默认选择尺寸
    M.PAPER="柯达Kodak";//默认相纸
    
    /**
     * div scroll init
     */
    //阻尼系数
	var deceleration = mui.os.ios?0.003:0.0009;
	mui('.mui-scroll-wrapper').scroll({
		bounce: false,
		indicators: true, //是否显示滚动条
		deceleration:deceleration
	});
	
	/**
	 * 监听DOMContentLoaded事件
	 */
	var SelectedSizeDOM=null,SelectedPaperDOM=null,EmpryDOM=null,
	CameraDOM=null,GalleryDOM=null,HistoryDOM=null,ConfirmPrintDOM;
	document.addEventListener("DOMContentLoaded",function(){
		//获取DOM元素对象
		HistoryDOM=document.getElementById("history");
		SelectedSizeDOM=document.getElementById("selected-size");
		SelectedPaperDOM=document.getElementById("selected-papertype");
		EmpryDOM=document.getElementById("empty");
		CameraDOM=document.getElementById("camera");
		GalleryDOM=document.getElementById("gallery");
		ConfirmPrintDOM=document.getElementById("confirmPrint");
		
		/**
		 * 选择尺寸
		 */
		SelectedSizeDOM.addEventListener('selected',function(e){
			//"当前选中的为："+e.detail.el.innerText;
			var dom=e.detail.el;
			M.SIZE_DES=dom.innerText;
	
		});
		
		/**
		 * 选择相纸
		 */
		SelectedPaperDOM.addEventListener('selected',function(e){
			//"当前选中的为："+e.detail.el.innerText;
		});
		
		/**
		 * 拍照
		 */
		CameraDOM.addEventListener('tap',function(e){
			getImage();
		});
		
		/**
		 * 相册选取，支持多选
		 */
		GalleryDOM.addEventListener('tap',function(e){
			galleryImgs();
		});
		
		/**
		 * 生成订单
		 */
		ConfirmPrintDOM.addEventListener('tap',function(e){
			startUploader(function(){
				//mui.log("M.selePhotoName："+JSON.stringify(M.selePhotoName));
				utils.openWindow("orderMenu","orderMenu.html",
				"slide-in-bottom",300,false,{SIZE:M.SIZE_DES,PAPER:M.PAPER,PNStr:M.selePhotoName.join(","),PHOTO_COUNT:M.selePhotoName.length});
			});
			
		});
		
	},false );
	
		/**
		 * start uploader
		 */
		function startUploader(success){
			var e=this;
			e.waiting=plus.nativeUI.showWaiting("生成订单中...");
			if(M.PhotoFiles.length<=0){
				e.waiting.close();
				mui.alert("您没有添加任何的照片哦");
				return;
			}
			
			var task=plus.uploader.createUpload(CONFIG.UPLOADER_SERVER,
				{method:"POST"},
				function(t,status){ //上传完成
					e.waiting.close();
					if(status==200){
						success();
					}else{
						mui.alert("生成订单失败了");
					}
				}
			);
			
			task.addData("client","MyPrintPhotoAPP");
			
			for(var i=0;i<M.PhotoFiles.length;i++){
				var f=M.PhotoFiles[i];
				//mui.log("f.path:"+f.path);
				M.selePhotoName.push(f.name);
				task.addFile(f.path,{key:f.name});
			}
			//开始上传
			task.start();
	
		}
		
		//拍照
		function getImage() {
			//outSet( "开始拍照：" );
			var cmr = plus.camera.getCamera();
			cmr.captureImage( function ( p ) {
				//outLine( "成功："+p );
				plus.io.resolveLocalFileSystemURL( p, function ( entry ) {
					createItem(entry.toLocalURL());
				}, function ( e ) {
					//outLine( "读取拍照文件错误："+e.message );
				} );
			}, function ( e ) {
				//outLine( "失败："+e.message );
			}, {filename:"_doc/camera/",index:1} );
		}
		
		function galleryImgs(){
			// 从相册中选择图片
			//outSet("从相册中选择多张图片:");
		    plus.gallery.pick( function(e){
		    	for(var i in e.files){
			    	createItem(e.files[i]);
		    	}
		    }, function ( e ) {
		    	//outSet( "取消选择图片" );
		    },{filter:"image",multiple:true});
		}
		
		//添加照片项
		function createItem(imgsrc) {
			var e=this;
			
			var li = document.createElement("li");
			li.className = "mui-table-view-cell mui-media mui-disabled";
			
			var tb=document.createElement("div");
			tb.className="mui-table";
			
			var cell8=document.createElement("div");
			cell8.className="mui-table-cell mui-col-xs-8";
			var img=document.createElement("img");
			img.className="mui-media-object mui-pull-left";
			img.src=imgsrc;
			img.setAttribute( "onclick", "displayFile(this);" );
			var pname=document.createElement("div");
			pname.className="mui-media-body mui-h5 photo-name mui-ellipsis-2";
			e.srcArray=imgsrc.split("/");
			pname.innerHTML=e.photoName=e.srcArray[e.srcArray.length-1];
			cell8.appendChild(img);
			cell8.appendChild(pname);
			
			var cell4=document.createElement("div");
			cell4.className="mui-table-cell mui-col-xs-4 mui-text-right";
			var deleteItem=document.createElement("a");
			deleteItem.className="imgpreview-close mui-icon mui-icon-closeempty";
			deleteItem.parentObj=li;
			deleteItem.setAttribute("onclick","removeImageItem(this);");
			cell4.appendChild(deleteItem);
			
			tb.appendChild(cell8);
			tb.appendChild(cell4);
			
			li.appendChild(tb);
			
			HistoryDOM.insertBefore(li, EmpryDOM.nextSibling);
			
			//已选照片
			M.PhotoFiles.push({name:e.photoName,path:imgsrc});
			
			// 设置空项不可见
			EmpryDOM.style.display = "none";
		}
		
		//查看图片
		var w=null;
		function displayFile(a) {
			if ( w ) {
				//outLine( "重复点击！" );
				return;
			}
			if ( !a || !a.src ) {
				//ouSet( "无效的媒体文件" );
				return;
			}
			
			w=plus.webview.create("image_preview.html","image_preview",
			{hardwareAccelerated:true,scrollIndicator:'none',scalable:true,bounce:"all",zindex:11});
			//w=utils.openWindow("image_preview","image_preview.html","pop-in",300,false);
			w.addEventListener( "loaded", function(){
				w.evalJS( "loadMedia('"+a.src+"')" );
			}, false );
			w.addEventListener( "close", function() {
				w = null;
			}, false );
			
			w.show( "fade-in" );
		}
		
		/**
		 * 删除已选择图片
		 */
		function removeImageItem(obj){
			HistoryDOM&&(HistoryDOM.removeChild(obj.parentObj));
			
			if(HistoryDOM.childNodes.length<=5) EmpryDOM.style.display="block";
			
		}
				
</script>
</html>